<template>
  <div class="ai-analysis">
    <main class="main-content">
      <div class="container">
        <div class="page-header">
          <h1>AI学习分析</h1>
          <p>通过AI分析您的学习数据，提供个性化建议</p>
        </div>

        <div class="analysis-layout">
          <!-- 左侧分析内容 -->
          <div class="analysis-content">
            <div class="analysis-card">
              <h3>学习状态分析</h3>
              <div class="status-grid">
                <div class="status-item">
                  <div class="status-icon">
                    <el-icon size="24" color="#67c23a"><TrendCharts /></el-icon>
                  </div>
                  <div class="status-info">
                    <h4>学习趋势</h4>
                    <p>上升</p>
                    <span class="trend-text">相比上周提升15%</span>
                  </div>
                </div>

                <div class="status-item">
                  <div class="status-icon">
                    <el-icon size="24" color="#409eff"><Clock /></el-icon>
                  </div>
                  <div class="status-info">
                    <h4>专注时长</h4>
                    <p>4.2小时/天</p>
                    <span class="trend-text">超过80%的用户</span>
                  </div>
                </div>

                <div class="status-item">
                  <div class="status-icon">
                    <el-icon size="24" color="#e6a23c"><Star /></el-icon>
                  </div>
                  <div class="status-info">
                    <h4>学习效率</h4>
                    <p>85分</p>
                    <span class="trend-text">优秀水平</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="analysis-card">
              <h3>AI建议</h3>
              <div class="suggestions-list">
                <div
                  v-for="suggestion in aiSuggestions"
                  :key="suggestion.id"
                  class="suggestion-item"
                >
                  <div class="suggestion-icon">
                    <el-icon :color="suggestion.color"
                      ><component :is="suggestion.icon"
                    /></el-icon>
                  </div>
                  <div class="suggestion-content">
                    <h4>{{ suggestion.title }}</h4>
                    <p>{{ suggestion.description }}</p>
                    <div class="suggestion-actions">
                      <el-button
                        size="small"
                        type="primary"
                        @click="applySuggestion(suggestion)"
                      >
                        应用建议
                      </el-button>
                      <el-button
                        size="small"
                        @click="ignoreSuggestion(suggestion)"
                      >
                        忽略
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="analysis-card">
              <h3>学习模式分析</h3>
              <div class="pattern-analysis">
                <div class="pattern-item">
                  <h4>最佳学习时段</h4>
                  <div class="time-blocks">
                    <div class="time-block active">09:00-11:00</div>
                    <div class="time-block">14:00-16:00</div>
                    <div class="time-block">19:00-21:00</div>
                  </div>
                  <p class="pattern-desc">
                    您在上午9-11点学习效率最高，建议安排重要学习任务
                  </p>
                </div>

                <div class="pattern-item">
                  <h4>学习习惯特征</h4>
                  <div class="habits-tags">
                    <el-tag type="success">专注型学习者</el-tag>
                    <el-tag type="info">视觉学习偏好</el-tag>
                    <el-tag type="warning">需要定期休息</el-tag>
                  </div>
                  <p class="pattern-desc">
                    建议采用番茄工作法，25分钟专注学习+5分钟休息
                  </p>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧数据图表 -->
          <div class="charts-sidebar">
            <div class="chart-card">
              <h4>学习时长趋势</h4>
              <div class="chart-placeholder">
                <el-icon size="40" color="#409eff"><TrendCharts /></el-icon>
                <p>7天学习时长变化</p>
              </div>
            </div>

            <div class="chart-card">
              <h4>专注度分布</h4>
              <div class="chart-placeholder">
                <el-icon size="40" color="#67c23a"><PieChart /></el-icon>
                <p>不同时段专注度对比</p>
              </div>
            </div>

            <div class="chart-card">
              <h4>知识掌握度</h4>
              <div class="knowledge-progress">
                <div class="progress-item">
                  <span>数学</span>
                  <el-progress :percentage="85" :show-text="false" />
                  <span>85%</span>
                </div>
                <div class="progress-item">
                  <span>英语</span>
                  <el-progress :percentage="72" :show-text="false" />
                  <span>72%</span>
                </div>
                <div class="progress-item">
                  <span>编程</span>
                  <el-progress :percentage="68" :show-text="false" />
                  <span>68%</span>
                </div>
              </div>
            </div>

            <div class="chart-card">
              <h4>学习报告</h4>
              <div class="report-actions">
                <el-button type="primary" @click="generateReport"
                  >生成周报</el-button
                >
                <el-button @click="exportData">导出数据</el-button>
              </div>
            </div>

          <aiBox></aiBox>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {
  TrendCharts,
  Clock,
  Star,
  PieChart,
  Warning,
  InfoFilled,
  CircleCheck,
} from "@element-plus/icons-vue";
import aiBox from "../../components/ai-chat-box/index.vue"
const aiSuggestions = ref([
  {
    id: 1,
    title: "调整学习时间分配",
    description: "建议增加数学学习时间，减少重复练习，提高学习效率",
    icon: TrendCharts,
    color: "#409eff",
    type: "time",
  },
  {
    id: 2,
    title: "改善学习环境",
    description: "检测到您在嘈杂环境下学习效率降低，建议选择安静场所",
    icon: Warning,
    color: "#e6a23c",
    type: "environment",
  },
  {
    id: 3,
    title: "增加休息频率",
    description: "长时间连续学习会降低专注度，建议每45分钟休息10分钟",
    icon: InfoFilled,
    color: "#67c23a",
    type: "rest",
  },
]);

const applySuggestion = (suggestion: any) => {
  ElMessage.success(`已应用建议：${suggestion.title}`);
};

const ignoreSuggestion = (suggestion: any) => {
  const index = aiSuggestions.value.findIndex((s) => s.id === suggestion.id);
  if (index > -1) {
    aiSuggestions.value.splice(index, 1);
    ElMessage.info("建议已忽略");
  }
};

const generateReport = () => {
  ElMessage.success("学习报告生成中...");
};

const exportData = () => {
  ElMessage.info("数据导出功能开发中");
};
</script>

<style scoped>
.ai-analysis {
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;

  padding: 40px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 2.5rem;
}

.page-header p {
  margin: 0;
  color: #7f8c8d;
  font-size: 1.1rem;
}

.analysis-layout {
  display: flex;
  gap: 30px;
}

.analysis-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.analysis-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.analysis-card h3 {
  margin: 0 0 24px 0;
  color: #2c3e50;
  font-size: 1.3rem;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.status-icon {
  flex-shrink: 0;
}

.status-info h4 {
  margin: 0 0 4px 0;
  color: #2c3e50;
  font-size: 16px;
}

.status-info p {
  margin: 0 0 4px 0;
  color: #409eff;
  font-size: 20px;
  font-weight: bold;
}

.trend-text {
  color: #7f8c8d;
  font-size: 12px;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.suggestion-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

.suggestion-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 20px;
}

.suggestion-content {
  flex: 1;
}

.suggestion-content h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.suggestion-content p {
  margin: 0 0 12px 0;
  color: #7f8c8d;
  line-height: 1.5;
}

.suggestion-actions {
  display: flex;
  gap: 8px;
}

.pattern-analysis {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pattern-item h4 {
  margin: 0 0 12px 0;
  color: #2c3e50;
}

.time-blocks {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.time-block {
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 6px;
  font-size: 14px;
  color: #7f8c8d;
}

.time-block.active {
  background: #409eff;
  color: white;
}

.habits-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.pattern-desc {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.5;
}

.charts-sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.chart-card h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
}

.chart-placeholder {
  text-align: center;
  padding: 20px;
  color: #7f8c8d;
}

.chart-placeholder p {
  margin: 8px 0 0 0;
  font-size: 14px;
}

.knowledge-progress {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-item span:first-child {
  width: 50px;
  font-size: 14px;
  color: #7f8c8d;
}

.progress-item span:last-child {
  width: 40px;
  font-size: 14px;
  color: #2c3e50;
  text-align: right;
}

.progress-item .el-progress {
  flex: 1;
}

.report-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-actions .el-button {
  width: 100%;
}

@media (max-width: 1024px) {
  .analysis-layout {
    flex-direction: column;
  }

  .charts-sidebar {
    width: 100%;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .analysis-card {
    padding: 20px;
  }

  .suggestion-item {
    flex-direction: column;
    text-align: center;
  }

  .time-blocks {
    flex-direction: column;
  }
}
</style>
